<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{ width: 200px; height: 200px; background:red;}
        #bar{ width: 100px; height: 100px; position: absolute; top: 0; left: 0; background-color: red;}
    </style>
</head>
<body>
<script>
//    var a = 22;
//    a%2==0?alert("shuangshu"):alert("danshu");
//    for(var i=1; i<10; i++) {
//        if(i==2)
//        {
//            break;
//        }
//        alert(i);
//    }
//    var obj = {a:1, b:2, c:3};
//    var attr = '';
//    for(attr in obj) {
//        alert(attr + "=" + obj[attr]);
//    }
//    function sum() {
//        var result = 0;
//        var i = 0;
//        for(i=0; i<arguments.length; i++) {
//            result += arguments[i];
//        }
//        alert(result);
//    }
//    sum(1,2,3,4);
//function getStyle(obj, attr) {
//    if(obj.currentStyle) {
////        alert(obj.currentStyle);
//        return obj.currentStyle[attr];
//    } else {
//        return getComputedStyle(obj, false)[attr];
//    }
//}
//function css() {
//    if(arguments.length == 2) {
////        return arguments[0].currentStyle[arguments[1]];
//        return getStyle(arguments[0], arguments[1]);
//    }
//    else if(arguments.length == 3) {
//        arguments[0].style[arguments[1]] = arguments[2];
//
//    }
//}
//window.onload = function() {
//    var oBtn = document.getElementById("btn1");
//    var oDiv = document.getElementById("div1");
//    oBtn.onclick = function() {
////        css(oDiv, 'background', 'green');
//        alert(css(oDiv, 'width'));
//    }
//};
//window.onload = function() {
//    var oDiv = document.getElementById('div1');
//    alert(oDiv.currentStyle.width);
//}
//var oDiv = document.getElementById('div1');
//    window.onload = function() {
//        if(oDiv.currentStyle) {
//            alert(oDiv.currentStyle.width);
//        } else {
//            alert(getComputedStyle(oDiv, false).width);
//        }
//    }
//function getClass(oParent, oClass){
//    var aTag = oParent.getElementsByTagName('*');
//    var result = [];
//    for(var i=0; i< aTag.length; i++) {
//        if(aTag[i].className == oClass) {
//            result.push(aTag[i]);
//        }
//    }
//    return result;
//}
//window.onload = function() {
//    var oUl = document.getElementById('oUl');
////    alert(oUl.childNodes.length);
////    alert(oUl.childNodes[1].nodeType); //空节点为3，元素节点为1
//
//    for(var i=0; i<oUl.childNodes.length; i++) {
//        if(oUl.childNodes[i].nodeType == 1) {
//            oUl.childNodes[i].style.background = 'red';
//        }
//    }
//
////    alert(oUl.children.length); //childNodes + nodeType
//
//};
//window.onload = function() {
//    var oUl = document.getElementById('oUl');
//    var oBox = getClass(oUl, 'red');
//
//    for(var i=0; i<oBox.length; i++) {
//        oBox[i].style.background = 'red';
//    }
//};
//    window.onload = function(){
//        var oTxt = document.getElementById('txt1');
//        var oBtn = document.getElementById('div1');
//        oBtn.onclick = function() {
//            var oNewWeb = window.open('about:blank');
//            oNewWeb.document.write(oTxt.value);
//        }
//    };


//?????????????
//var num = document.getElementById('num');
//    window.onload = function() {
//        for(var i=0; i<250; i++) {
//            num.innerHTML += "<" ;
////            alert(num.innerHTML);
//        }
//    };
    window.onload = function() {
        var oBtn = document.getElementById('btn1');
        oBtn.onclick = function() {
            setInterval(function(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var iSpeed = Math.floor(-scrollTop/8);
                document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed;
            },30);
        }
    };
</script>
<!--<input id="btn1" type="button" value="样式">-->
<!--<div id="div1" style=""></div>-->
<!--<ul id="oUl">-->
    <!--<li class="red">111</li>-->
    <!--<li class="yellow">222</li>-->
    <!--<li class="green">333</li>-->
<!--</ul>-->
<!--<textarea id="txt1" cols="40" rows="40"></textarea><br/>-->
<!--<input id="div1" type="button" value="changeon"/>-->
<!--<div id="bar"></div>-->
1<br/>2<br/>3<br/>4<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>11
<br/>12
<br/>13
<br/>14
<br/>15
<br/>16
<br/>17
<br/>18
<br/>19
<br/>20
<br/>21
<br/>22
<br/>23
<br/>24
<br/>25
<br/>26
<br/>27
<br/>28
<br/>29
<br/>30
<br/>31
<br/>32
<br/>33
<br/>34
<br/>35
<br/>36
<br/>37
<br/>38
<br/>39
<br/>40
<br/>41
<br/>42
<br/>43
<br/>44
<br/>45
<br/>46
<br/>47
<br/>48
<br/>49
<br/>50
<br/>51
<br/>52
<br/>53
<br/>54
<br/>55
<br/>56
<br/>57
<br/>58
<br/>59
<br/>60
<br/>61
<br/>62
<br/>63
<br/>64
<br/>65
<br/>66
<br/>67
<br/>68
<br/>69
<br/>70
<br/>71
<br/>72
<br/>73
<br/>74
<br/>75
<br/>76
<br/>77
<br/>78
<br/>79
<br/>80
<br/>81
<br/>82
<br/>83
<br/>84
<br/>85
<br/>86
<br/>87
<br/>88
<br/>89
<br/>90
<br/>91
<br/>92
<br/>93
<br/>94
<br/>95
<br/>96
<br/>97
<br/>98
<br/>99
<br/>100
<br/>101
<br/>102
<br/>103
<br/>104
<br/>105
<br/>106
<br/>107
<br/>108
<br/>109
<br/>110
<br/>111
<br/>112
<br/>113
<br/>114
<br/>115
<br/>116
<br/>117
<br/>118
<br/>119
<br/>120
<br/>121
<br/>122
<br/>123
<br/>124
<br/>125
<br/>126
<br/>127
<br/>128
<br/>129
<br/>130
<br/>131
<br/>132
<br/>133
<br/>134
<br/>135
<br/>136
<br/>137
<br/>138
<br/>139
<br/>140
<br/>141
<br/>142
<br/>143
<br/>144
<br/>145
<br/>146
<br/>147
<br/>148
<br/>149
<br/>150
<input type="button" id="btn1" value="回到顶部"/>
</body>
</html>